<template>
  <div class="common-pagination-box">
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      :page-sizes="pageSizes"
      :total="total"
      layout="sizes,prev, pager, next, total"
      :current-page="currentPage"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </div>
</template>
<script setup>
const emit = defineEmits(['currentChange', 'sizeChange'])
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50],
  },
})

function currentChange(val) {
  emit('currentChange', val)
}

function sizeChange(val) {
  emit('sizeChange', val)
}
</script>

<style scoped lang="scss">
.common-pagination-box {
  margin-top: 10px;

  .el-pagination {
    justify-content: flex-end;
  }
}
</style>
